
<html>
    <head>
        <title>Itowns - LAZ drag and drop</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
            }
        }
        </script>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv">
            <div id="description">Drag and drop a LAS/LAZ file</div>
        </div>

        <script type="module">

            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';

            var viewerDiv = document.getElementById('viewerDiv');
            var view = new itowns.View('EPSG:3946', viewerDiv);
            view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
            var controls = new itowns.FirstPersonControls(view, { focusOnClick: true });

            var fileReader = new FileReader();
            var stack = [];

            function addFiles(event, files) {
                event.preventDefault();
                for (var i = 0; i < files.length; i++) {
                    stack.push(files[i]);
                }

                fileReader.onload = function onload(e) {
                    var data = e.target.result;

                    itowns.LASParser.parse(data, {}).then(function _(geometry) {
                        if (stack.length > 0) {
                            fileReader.readAsArrayBuffer(stack.shift());
                        }

                        var material = new itowns.PointsMaterial();
                        var points = new THREE.Points(geometry, material);
                        points.frustumCulled = false;
                        points.matrixAutoUpdate = false;
                        points.updateMatrix();
                        view.scene.add(points);
                        points.updateMatrixWorld(true);

                        var lookAt = new THREE.Vector3();
                        var size = new THREE.Vector3();
                        geometry.boundingBox.getSize(size);
                        geometry.boundingBox.getCenter(lookAt);

                        view.camera3D.far = Math.max(2.0 * size.length(), view.camera3D.far);

                        var position = geometry.boundingBox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));

                        view.camera3D.position.copy(position);
                        view.camera3D.lookAt(lookAt);

                        controls.options.moveSpeed = size.length();

                        view.notifyChange(view.camera3D);
                        controls.reset();
                    });
                };

                fileReader.readAsArrayBuffer(stack.shift());
            }

            document.addEventListener('dragenter', function _(e) { e.preventDefault(); }, false);
            document.addEventListener('dragover', function _(e) { e.preventDefault(); }, false);
            document.addEventListener('dragleave', function _(e) { e.preventDefault(); }, false);
            document.addEventListener('drop', function _(e) { addFiles(e, e.dataTransfer.files); }, false);
            document.addEventListener('paste', function _(e) { addFiles(e, e.clipboardData.files); }, false);
            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>


